<template>
  <basic :field="field">
    <template slot="fieldProps">
      <FormItem label="star 总数">
        <Input v-model="fieldProps.count" @on-change="handleChange('count')"/>
      </FormItem>
    </template>
    <template slot="fieldProps">
      <FormItem label="是否支持半选">
        <i-switch v-model="fieldProps.allowHalf" @on-change="handleChange('allow-half')"/>
      </FormItem>
    </template>
  </basic>
</template>

<script>
import basic from './basic.vue';

export default {
  name: 'fieldRate',
  components: {
    basic
  },
  props: {
    field: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      fieldProps: {
        allowHalf: false,
        count: 5
      }
    };
  },
  methods: {
    handleChange(name) {
      let field = {};
      switch (name) {
        case 'allow-half':
          field = {
            props: { 'allow-half': this.fieldProps.allowHalf ? 1 : 0 }
          };
          break;
        case 'count':
          field = { props: { count: this.fieldProps.count } };
          break;
      }
      this.$parent.$parent.$emit('on-change-field', field);
    },
    handleSave(basicProps, emitName, callback) {
      const { allowHalf } = this.fieldProps;

      basicProps.props['allow-half'] = allowHalf;

      return this.$parent.$parent.$emit(emitName, basicProps, callback);
    },
    init() {
      this.fieldProps.allowHalf = this.field.props['allow-half'] == 1;
      this.fieldProps.count = this.field.props.count || 5;
    }
  },
  created() {
    this.init();
  },
  watch: {
    field: {
      handler() {
        this.init();
      },
      deep: true
    }
  }
};
</script>
